<template>
	<view class="my-setting">
		<view class="img" @click="updateImg">
			<u--image :src="avatarImg" shape="circle" width="70px" height="70px">
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
			<view class="tip-text">点击更换头像</view>
		</view>
		<view class="form">
			<u--form :model="userData" ref="userData" labelWidth="100" borderBottom>
				<u-form-item label="账号" prop="userAccount" leftIcon="chat" borderBottom>
					<view>{{userData.userAccount}}</view>
					<!-- <u-input v-model="userData.userAccount" border="none" disabled /> -->
				</u-form-item>
				<u-form-item label="我的昵称" prop="userName" leftIcon="account" borderBottom>
					<u-input v-model="userData.userName" border="none" />
				</u-form-item>
				<u-form-item label="电话" prop="userTel" leftIcon="phone" borderBottom>
					<u-input v-model="userData.userTel" border="none" />
				</u-form-item>
			</u--form>
		</view>

		<view class="button-bottom">
			<van-button round color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="saveClick">保 存</van-button>
		</view>

		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import Toast from '../../wxcomponents/@vant/weapp/toast/toast';
	import {
		envURL
	} from '@/utils/env.js'
	import {
		removeToken,
		getToken
	} from '@/utils/auth.js'
	import {
		getUserInfo,
		modifyUserInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				userData: {},
				avatarImg: ''
			}
		},
		methods: {
			updateImg() {
				let that = this
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths);
						uni.uploadFile({
							url: envURL + 'user/uploadAvatar', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'avatar',
							header: {
								['x-token']: getToken(),
							},
							formData: {
								userAccount: that.userData.userAccount
							},
							success: async res => {
								// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
								let data = JSON.parse(res.data);
								// 成功：获取到头像
								if (data.hasOk) {
									// 更新当前页面数据
									Toast.loading({
										message: '上传中...',
										forbidClick: true,
									});
									const userRes = await getUserInfo()
									that.userData = userRes.data
									that.avatarImg = envURL + userRes.data.avatar
									Toast.success('上传成功');
								} else {
									Toast.fail('上传失败');
								}
							}
						});
					},
					fail: err => {}
				});
			},
			async saveClick() {
				this.userData.role = this.userData.roleCode
				const res = await modifyUserInfo(this.userData)
				if (res.hasOk) {
					Toast.success('修改成功');
					uni.navigateBack()
				} else {
					Toast.fail(res.message);
				}
			},


			async getUserInfoFn() {
				const res = await getUserInfo()
				this.userData = res.data
				this.avatarImg = envURL + res.data.avatar
			},
			onShow() {
				this.getUserInfoFn()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		margin-bottom: 10px;
	}

	.tip-text {
		padding-top: 6px;
		font-size: 26rpx;
		color: #999999;
	}

	.form {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		font-size: 10px;

		/deep/ .u-form-item__body__left__content__label {
			font-size: 12px;
			padding-left: 6px;
		}


		/deep/ .u-icon__icon {
			color: #2aa1de !important;
		}
	}

	.button-bottom {
		position: fixed;
		display: flex;
		justify-content: center;
		width: 100%;
		bottom: 50px;

		/deep/.van-button {
			padding: 0 40px;
		}
	}
</style>